<template>
  <div class="add-edit-role">
    <je-modal
      v-model:visible="visible1"
      :title="mode"
      button-align="center"
      width="600"
      height="auto"
      cancel-button
      :ok-button="onSubmit"
      @close="closeDialog"
    >
      <div class="warp">
        <je-form
          :model="modelRef"
          style="width: 500px"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 17 }"
          autocomplete="off"
          label-align="right"
          :colon="false"
        >
          <je-form-item label="角色名称" v-bind="validateInfos.name">
            <je-input v-model:value.trim="modelRef.name" />
          </je-form-item>
          <je-form-item label="角色编码">
            <je-input v-model:value="modelRef.code" disabled="disabled" />
          </je-form-item>
          <je-form-item v-if="JE_SAAS_ENABLE != '1'" label="使用权限组" name="permissionName">
            <je-tree-select
              v-model:value="modelRef.permissionName"
              textarea
              style="height: 60px"
              config-info="JE_RBAC_PERMGROUP,permissionName~permissionId,text~id,M"
            />
          </je-form-item>
        </je-form>
      </div>
    </je-modal>
  </div>
</template>

<script>
  import { defineComponent, onMounted, reactive, ref } from 'vue';

  import { Input, Form, Modal, InputSelect } from '@jecloud/ui';

  import { addRoleApi, upDateRoleApi } from '@/api';

  const useForm = Form.useForm;

  import { verifyData } from '@/utils/validate';
  import { getSystemConfig } from '@jecloud/utils';

  export default defineComponent({
    name: 'AddEditRole',
    components: {
      JeModal: Modal,
      JeInput: Input,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeTreeSelect: InputSelect.Tree,
    },
    props: {
      mode: {
        type: String,
        required: true,
      },
      currentRow: {
        type: Object,
        default: () => {},
      },
      visible: {
        type: Boolean,
        default: false,
      },
      codeNumber: {
        type: String,
        default: '<系统自动生成>',
      },
    },
    emits: ['update:visible', 'AddEditRole'],
    setup(props, { emit }) {
      // 是否开启Saas模式
      const JE_SAAS_ENABLE = getSystemConfig('JE_SAAS_ENABLE');
      // 自己关闭对话框，修改父组件数据状态
      const closeDialog = () => {
        emit('update:visible', false);
      };
      const visible1 = ref(props.visible);
      // 表单数据
      const modelRef = reactive({
        permissionName: '',
        permissionId: '',
        code: '',
        name: '',
      });

      onMounted(() => {
        // 赋值
        if (props.mode === '编辑') {
          modelRef.name = props.currentRow?.text;
          modelRef.code = props.currentRow?.code;
        } else {
          modelRef.code = props.codeNumber;
        }
      });
      // 验证规则
      const rulesRef = reactive({
        name: verifyData.title,
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        // onValidate: (...args) => console.log(...args),
      });

      // 点击确认按钮
      const onSubmit = () => {
        validate()
          .then(() => {
            if (props.mode === '编辑') {
              // 编辑
              if (modelRef.name === props.currentRow?.text)
                return Modal.notice('无数据操作!', 'info');
              const { JE_RBAC_ROLE_ID, ROLE_BASE_ID, ROLE_REMARK } = props.currentRow.bean;
              upDateRoleApi({
                roleId: JE_RBAC_ROLE_ID,
                roleName: modelRef.name,
                baseRoleId: ROLE_BASE_ID,
                remark: ROLE_REMARK,
              }).then((res) => {
                Modal.notice(res, 'success');
                emit('AddEditRole'), closeDialog();
              });
            } else {
              // 新增
              if (props.currentRow?.id) {
                // 加到文件夹中
                addRoleApi({
                  roleName: modelRef.name,
                  parentId: props.currentRow.id,
                  permGroupIds: modelRef.permissionId,
                  permGroupNames: modelRef.permissionName,
                  icon: 'fal fa-user',
                }).then((res) => {
                  Modal.notice(res.message, 'success');
                  emit('AddEditRole', res.data.JE_RBAC_ROLE_ID), closeDialog();
                });
              } else {
                // 加到一级目录
                addRoleApi({
                  roleName: modelRef.name,
                  permGroupIds: modelRef.permissionId,
                  permGroupNames: modelRef.permissionName,
                  icon: 'fal fa-user',
                }).then((res) => {
                  Modal.notice(res.message, 'success');
                  emit('AddEditRole', res.data.JE_RBAC_ROLE_ID), closeDialog();
                });
              }
            }
          })
          .catch(() => {});
        return false;
      };

      return {
        modelRef,
        validateInfos,
        resetFields,
        onSubmit,
        closeDialog,
        visible1,
        JE_SAAS_ENABLE,
      };
    },
  });
</script>

<style lang="less" scoped>
  .add-edit-role {
    :deep(.fa-window-maximize) {
      display: none;
    }
  }
</style>
